import { Router, Route, Switch } from "react-router-dom"
import { lazy, Suspense } from "react"
import { customHistory } from "@/utils"
import "./App.scss"
// import Login from "@/pages/Login"
// import Layout from "@/pages/Layout"
import AuthRoute from "@/components/AuthRoute"
// import NotFound from "@/pages/NotFound"
const Login = lazy(() => import("@/pages/Login"))
const Layout = lazy(() => import("@/pages/Layout"))
const NotFound = lazy(() => import("@/pages/NotFound"))

const App = () => {
  return (
    <Router history={customHistory}>
      <div className="app">
        {/* 保证只有满足匹配条件的第一个路由显示 */}
        <Suspense fallback={<div className="loading">loading...</div>}>
          <Switch>
            <Route path="/login">
              <Login></Login>
            </Route>
            <AuthRoute path="/">
              <Layout></Layout>
            </AuthRoute>
            <Route>
              <NotFound></NotFound>
            </Route>
          </Switch>
        </Suspense>
      </div>
    </Router>
  )
}
export default App
